<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="empcss.css"/>
		<style type="text/css">
			.atime{
				width: 100%;	
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: white;
			}
			.atime>div{
				padding: 10px 20px;	
			}
			.atable{
				width: 100%;
			}
			table{
				width: 100%;
				margin: 20px auto;
				border-radius: 20px;
				background-color: white;
				font-size: 0.8em;
				font-family: "微软雅黑";
			}
			tr{
				text-align: center;
			}
			td{
				width: 20%;
				text-align: center;
				padding: 0.4em 0;
			}
			.bbt{
				border-bottom: 1px solid #C7C7CC;
			}
			.theader{
				width: 100%;
				background-color: #0076FF;
				color: white;
			}
			.theader>td{
				color: white;
				padding: 0.6em 0;
			}
			.blr{
				border-top-left-radius: 20px;
			}
			.brr{
				border-top-right-radius: 20px;
			}
			.footdiv>div{
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.footdiv>div:first-child{
				border-right: 1px solid #C7C7CC;
			}
			
			.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.borbot{
				border-bottom: 1px solid #BBBBBB;
			}
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			.select{
				background-color: #007aff;
				color: white;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">员工薪资统计</h1>
		</header>
		<div class="mui-content">
			<!--
            	作者：592176224@qq.com
            	时间：2019-03-05
            	描述：
		    <div class="atime">
		    	<div class="mui-icon mui-icon-arrowleft ">
		    		
		    	</div>
		    	<div class="">
		    		2018-12-11
		    	</div>
		    	<div class="mui-icon mui-icon-arrowright ">
		    	</div>
		    </div>
            -->
            <div class="mui-input-row borbot" >
				<label>门店:</label>
	    		<div class="place items">
				    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">门店选择</button>
				</div>
			</div> 
		    <div class="" id="mlist">
		    	
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-03-08
                    	描述：
                   
		    	    <li class="mui-table-view-cell mui-media">
		    	        <a href="javascript:;">
		    	            <img class="mui-media-object mui-pull-left" src="../../images/user-photo.png">
		    	            <div class="mui-media-body">
		    	            	张三
		    	            	<div class="flex-row-between fe08">
		    	             		<span id="">基本工资：1000</span>
		    	             		<span id="">服务提成：1000</span>
		    	             	</div>
		    	             	<div class="flex-row-between fe08">
		    	             		<span id="">商品提成：1000</span>
		    	             		<span id="">充值提成：1000</span>
		    	             	</div>
		    	             	<div class="flex-row-between fe08">
		    	             		
		    	             		<span id="">次卡扣减提成：1000</span>
		    	             		<span id="">业绩提成：1000</span>
		    	             	</div>
		    	             	
		    	            </div>
		    	        </a>
		    	    </li>
		    	    -->
		    </div>
		    
		    <div class="fgd"></div>
		    <div class="footdiv" id="date_typeid">
		    	<div class="select" data-type="date" id="month">
		    		本月
		    	</div>
		    	<div data-type="custom" id="custom">
		    		时间段
		    	</div>
		    </div>
		    
		    <div id="popover" class="mui-popover">
			   <div class="listdiv">
			   		<div class="mui-input-row borbot" >
						<label>开始时间:</label>
			    		<div class="place items">
						    <button id='starttime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
			    		<div class="place items">
						    <button id='endtime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			   </div>
			</div>
			
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			var type = "date",	//日期格式
			datatype = "month",	//日期本月获 时间段
			store_id = 0,		//门店id
			start_time = "",	//时间
			end_time = "";
			
			window.onload = function(){
				
				mui.init();
				/*$("#date_typeid").on("tap","div",function(e){
					date_type = $(this).data("type");
					datatype = this.getAttribute('id');
					$(this).addClass("select").siblings().removeClass("select");
					
					getperformance_summary();
				})*/
				
				$("#date_typeid").on("tap","div",function(e){
					var tid = this.getAttribute('id');
					if(tid != 'custom'){
						datatype = tid;
						type = $(this).data("type");
						$(this).addClass("select").siblings().removeClass("select");
						getperformance_summary();
					}else{
						mui('#popover').popover('toggle',g("popover"));
					}
					
					
				})
				$("#okbut").on("tap",function(e){
					var cus = $("#custom");
					console.log(cus)
					//console.log($("#custom"));
					type = cus.data("type");
					datatype = cus.attr('id');
					cus.addClass("select").siblings().removeClass("select");
					mui('#popover').popover('hide');
					getperformance_summary();
				})
				
				
				var starttime = document.getElementById('starttime');
                starttime.addEventListener('tap', function(event) {
                	var starttimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    starttimePicker.show(function(e) {
                    	 starttime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
                
                var endtime = document.getElementById('endtime');
                endtime.addEventListener('tap', function(event) {
                	var endtimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    endtimePicker.show(function(e) {
                    	 endtime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
				store();
				getperformance_summary();
			}
			//获取门店列表
			function store(){
				var data = {
					url:"/api/store/lst",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("门店列表",res)
					setpop(res.data)
				})
			}
			function setpop(list){
				var list1 = [];
				for(var i = 0; i < list.length; i++){
							var str = {value:list[i].id,text:list[i].store_name}
							list1.push(str);
				}
				var levelPicker = new mui.PopPicker();
                levelPicker.setData(list1);
                var level = document.getElementById('level');
                level.addEventListener('tap', function(event) {
                    levelPicker.show(function(items) {
                        level.innerText = items[0].text;
                        store_id = items[0].value;
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                        getperformance_summary();
                    });
                }, false);
			}
			
			function getperformance_summary(){
				var starttime = g("starttime");
				var endtime = g("endtime");
				var stime = starttime.innerText!="开始时间"?starttime.innerText:"";
				var etime = endtime.innerText!="结束时间"?endtime.innerText:"";
				var data = {
					url:"/api/employee/performance_summary",
					data:{
						access_token:acctoken(),
						store_id:store_id,
						type:type,
						date:datatype,
						start_time:stime,
						end_time:etime
					}
				}
				ajax(data,function(res){
					console.log(res);
					setperformance_summary(res.data);
				})
				
			}
			/*
			function getperformance_summary(){
				var data = {
					url:"/api/employee/performance_summary",
					data:{
						access_token:acctoken(),
						store_id:store_id,
						type:type,
						date:datatype,
						start_time:start_time||"",
						end_time:end_time||""
					}
				}
				ajax(data,function(res){
					console.log(res);
					setperformance_summary(res.data);
				})
				
			}*/
			function setperformance_summary(list){
				var str = '';
				var employee = list.employee;
				if(employee&&employee.length > 0){
					for(var i = 0; i < employee.length;i++){
						str += '<ul class="mui-table-view" ><li class="mui-table-view-cell mui-media">'+
		    	        '<a href="javascript:;">';
		    	        if(employee[i].employee_images_path != null){
                    		str += '<img class="mui-media-object mui-pull-left border50" src="'+employee[i].employee_images_path+'"/></div>';
                    	}else{
                    		str += '<img class="mui-media-object mui-pull-left border50" src="../../images/user-photo.png"/></div>';
                    	}
		    	        //'<img class="mui-media-object mui-pull-left" src="../../images/user-photo.png">'+
		    	        str += '<div class="mui-media-body">'+
		    	        employee[i].username+
		    	        '<div class="flex-row-between fe08">'+
		    	        	'<span id="">基本工资：'+employee[i].employee_wages+'</span>'+
		    	            '<span id="">服务提成：'+employee[i].service_percent_money+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	            '<span id="">商品提成：'+employee[i].goods_percent_money+'</span>'+
		    	            '<span id="">充值提成：'+employee[i].recharge_percent_money+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	            '<span id="">次卡扣减提成：'+employee[i].consume_percent_money+'</span>'+
		    	            '<span id="">业绩提成：'+employee[i].sell_percent_money+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	            '<span id="">合计：'+employee[i].direct_wages_money+'</span>'+
		    	        '</div>'+
		    	        '</div></a></li>'
					}
					str += '<li class="mui-table-view-cell mui-media">'+
		    	        '<a href="javascript:;">'+
		    	        '<div class="mui-media-body">合计'+
		    	        '<div class="flex-row-between fe08">'+
		    	        	'<span id="">基本工资：'+list.employee_wages_all+'</span>'+
		    	            '<span id="">商品提成：'+list.goods_money_percent_all+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	            '<span id="">服务提成：'+list.service_money_percent_all+'</span>'+
		    	            '<span id="">充值提成：'+list.recharge_money_percent_all+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	            '<span id="">次卡扣减提成：'+list.consume_money_percent_all+'</span>'+
		    	            '<span id="">业绩提成：'+list.sell_money_percent_all+'</span>'+
		    	        '</div>'+
		    	        '</div></a></li></ul>';
				}else{
					//TODO handle the exception
					str += '<div class="nolistdiv">暂无数据</div>';
				}
				
				g("mlist").innerHTML = str;
				
			}
		</script>
	</body>

</html>